<template>
	<view class="msgcard space-between">
		<view class="p-left">
			<image class="headimg" src="" mode=""></image>
		</view>
		<view class="p-right">
			<view class="col full">
				<view class="right-top relative">
					<i>{{msgdata.username}}</i><span class="say u-line-3">{{msgdata.content}}</span>
					<!-- <u-text :lines="3" :text="msgdata.content" color="#000" size="14" :wordWrap="anywhere"></u-text> -->
				</view>
				<view class="file hor-center" v-if="msgdata.filename">
					<img class="file-img" src="../../static/ppt.jpg" alt="" />
					<view class="file-name">
						<u-text :lines="2" :text="msgdata.filename" color="#929292" size="14" :block="true"></u-text>
					</view>
				</view>
				<view class="pics">
					<u-album :urls="msgdata.urls2" @albumWidth="width => albumWidth = width" :singleSize="60" multipleSize="60">
					</u-album>
				</view>
				<view class="card-bottom hor-center space-between">
					<view class="time">
						{{msgdata.date}}
					</view>
					<view class="msgsrc">
						{{msgdata.resource}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "msg-card",
		data() {
			return {

			};
		},
		props: {
			msgdata: Object
		}
	}
</script>

<style lang="scss" scoped>
	.msgcard {
		margin: 4vh 0;
	}
	
	.p-left {
		.headimg {
			width: 1.5rem;
			height: 1.5rem;
			padding: 0 6px;
			background-color: #ebf5f4;
			border-radius: 50%;
			margin-right: 3vw;
		}
		
	}
	.p-right {
		.right-top {
			i {
				position: absolute;
				font-style: normal;
				color: #627687;
				&::after {
					position: relative;
					content: ":";
					bottom: 2px;
					margin-right: 2vw;
				}
			}
			
			.say {
				text-indent: 25%;
				font-size: 15px;
				line-height: 22px;
				&::before {
					content: '#';
				}
			}
		}
		.file{
			margin-top: 1vh;
			.file-img {
				width: 50px;
				height: 50px;
				border-radius: 4px;
				background-color: #e9975d;
			}
			.file-name {
				padding: 0.5rem;
				width: 100%;
				height: 50px;
				background: #f6f6f6;
				border-radius: 4px;
			}
		}
		.pics {
			margin: 1vh 0;
		}
		.card-bottom {
			font-size: 13px;
			padding-right: 5px;
			color: #baa;
		}
		
	}
</style>
